<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>DeepSeek 聊天</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .chat-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .message {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: 20%;
        }
        .assistant-message {
            background-color: #f5f5f5;
            margin-right: 20%;
        }
    </style>
</head>
<body>
<div class="chat-container">
    <h1 class="text-center mb-4">DeepSeek 聊天</h1>

    <div id="chat-messages">
        <div th:each="message : ${messages}"
             th:classappend="${message.role == 'user' ? 'user-message' : 'assistant-message'}"
             class="message">
            <strong th:text="${message.role == 'user' ? '你' : 'DeepSeek'}"></strong>:
            <div th:text="${message.content}"></div>
        </div>
    </div>

    <form th:action="@{/admin/chat}" method="post" class="mt-4">
        <div class="input-group">
            <input type="text" th:field="*{newMessage.content}"
                   class="form-control" placeholder="输入你的消息...">
            <button type="submit" class="btn btn-primary">发送</button>
        </div>
    </form>
</div>
</body>
</html>